<script lang="ts" setup>
import VueJsonPretty from 'vue-json-pretty'
import type { SystemLogType } from './utils/model'
import { usePublicHooks } from './utils/usePublicHooks'

type Props = {
  data: SystemLogType
}
const { data } = defineProps<Props>()
const { getBusinessTypeTag, getOperatorTypeTag } = usePublicHooks()

const tabActive = ref('1')
</script>

<template>
  <div class="systemLog-details">
    <a-descriptions :column="5" bordered size="middle" style="margin-top: 15px">
      <a-descriptions-item label="标题">{{ data.title }}</a-descriptions-item>
      <a-descriptions-item label="IP地址">{{ data.operIp }}</a-descriptions-item>
      <a-descriptions-item label="IP地点">{{ data.ipAddress }}</a-descriptions-item>
      <a-descriptions-item label="操作系统">{{ data.operatingSystem }}</a-descriptions-item>
      <a-descriptions-item label="浏览器类型">{{ data.browserType }}</a-descriptions-item>
      <a-descriptions-item label="操作类型">
        <a-tag :color="getOperatorTypeTag(data.operatorType)">{{
          getOperatorTypeTag(data.operatorType, true)
        }}</a-tag>
      </a-descriptions-item>
      <a-descriptions-item label="操作状态">
        <a-tag v-if="data.status == 1" color="green">成功</a-tag>
        <a-tag v-else color="red">失败</a-tag>
      </a-descriptions-item>
      <a-descriptions-item label="业务类型">
        <a-tag :color="getBusinessTypeTag(data.businessType)">{{
          getBusinessTypeTag(data.businessType, true)
        }}</a-tag>
      </a-descriptions-item>
      <a-descriptions-item label="操作人员">{{ data.operName }}</a-descriptions-item>
      <a-descriptions-item label="请求时间">{{ data.operTime }}</a-descriptions-item>
      <a-descriptions-item label="请求方法">{{ data.requestMethod }}</a-descriptions-item>
      <a-descriptions-item label="请求耗时">{{ data.costTime }}ms</a-descriptions-item>
      <a-descriptions-item label="请求接口">{{ data.method }}</a-descriptions-item>
    </a-descriptions>
    <div>
      <a-tabs v-model:activeKey="tabActive" style="margin-top: 15px">
        <a-tab-pane key="1" class="systemLog-details-tabs" tab="响应体">
          <vue-json-pretty :data="JSON.parse(data.responseBody)" />
        </a-tab-pane>
        <a-tab-pane key="2" tab="请求体">
          <vue-json-pretty :data="JSON.parse(data.requestBody)" />
        </a-tab-pane>
        <a-tab-pane key="3" tab="请求头">
          <vue-json-pretty :data="JSON.parse(data.requestHeader)" />
        </a-tab-pane>
        <a-tab-pane key="4" tab="异常信息">
          <p>{{ data.errorMsg || '无异常信息' }}</p>
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
</template>

<style scoped>
.systemLog-details-tabs {
  overflow: hidden;
  max-height: calc(100vh - 310px);
  overflow-y: auto;
}
</style>
